svg paths filling

7.8 Paths and fillings

Commands fill-rule: nonzero and fill-rule: evenodd work differently only if inside a path some closed shapes have the same directions (both clockwise or both anticlockwise).

Example 1. Squares in a path with the same direction (clockwise) and fill-rule:nonzero

<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <path d="m 20 20 h 60 v 60 h -60 z M 30 30 h 40 v 40 h -40 z"
   style=" fill:#999; fill-opacity:0.5; fill-rule:nonzero"/>
</svg>

Example 2. Two squares in one path with the same direction (clockwise) and fill-rule:evenodd

<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <path d="m 20 20 h 60 v 60 h -60 z M 30 30 h 40 v 40 h -40 z"
   style=" fill:#999; fill-opacity:0.5; fill-rule:evenodd"/>
</svg>

Example 3. Two squares in one path with the opposite direction (clockwise, anticlockwise) and fill-rule:nonzero

<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <path d="m 20 20 h 60 v 60 h -60 z M 30 30 v 40 h 40 v -40 z"
   style=" fill:#999; fill-opacity:0.5; fill-rule:nonzero"/>
</svg>

Example 4. Two squares in one path with the opposite direction (clockwise, anticlockwise) and fill-rule:evenodd

<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <path d="m 20 20 h 60 v 60 h -60 z M 30 30 v 40 h 40 v -40 z"
   style=" fill:#999; fill-opacity:0.5; fill-rule:evenodd"/>
</svg>

Example 5.Three squares in one path with the opposite direction (clockwise, anticlockwise, clockwise) and fill-rule:evenodd

<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <path d="m 20 20 h 60 v 60 h -60 z M 30 30 v 40 h 40 v -40 z M 40 40 h 20 v 20 h -20 z"
   style=" fill:#999; fill-opacity:0.5; fill-rule:evenodd"/>
</svg>

Example 6.Three squares in one path with the opposite direction (clockwise, anticlockwise, clockwise) and fill-rule:nonzero

<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <path d="m 20 20 h 60 v 60 h -60 z M 30 30 v 40 h 40 v -40 z M 40 40 h 20 v 20 h -20 z"
   style=" fill:#999; fill-opacity:0.5; fill-rule:nonzero"/>
</svg>